<template>
    <q-btn dense flat stretch round icon="language">
        <q-menu>
            <q-list style="min-width: 100px">
                <q-item clickable v-close-popup @click="changeLang('ZH')">
                    <q-item-section>简体中文</q-item-section>
                </q-item>
                <q-item clickable v-close-popup @click="changeLang('EN')">
                    <q-item-section>English</q-item-section>
                </q-item>
            </q-list>
        </q-menu>
    </q-btn>
</template>

<script setup lang='ts'>
import { watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar';
import { useSiteSettings } from 'stores/site_setting'
import { storeToRefs } from 'pinia';

const siteSettings = useSiteSettings()
const siteSettingsRef = storeToRefs(siteSettings)

const $q = useQuasar()
const { t } = useI18n({
    useScope: 'global'
})

const languageDict: { [key: string]: string; } = {
    'EN': <string>'English',
    'ZH': <string>'中文'
}

const changeLang = (lang: string) => {
    siteSettings.changeLanguage(lang)
}

watch(siteSettingsRef.language, (newValue) => {
    $q.notify({
        progress: true,
        message: t('language.set_success',
            { language: languageDict[newValue] }),
        icon     : 'check_circle_outline',
        position : 'bottom-right',
        type     : 'positive',
        multiLine: false,
        timeout  : 800
    })
})
</script>

<style style scoped lang = "less" >
</style>
